<html>
<head>
    <title>SIMILE | Timeline | Examples | Religion Timelines</title>
    <link rel='stylesheet' href='styles.css' type='text/css' />

    <!-- ############################################################################ -->
    <!-- To use this file on your own system, replace ../../api/timeline-api.js with  -->
    <!--     http://static.simile.mit.edu/timeline/api-2.3.0/timeline-api.js          -->
    <!-- (Where 2.3.0 is the current release number.)                                 -->
    <script>
      Timeline_ajax_url="ajax/api/simile-ajax-api.js";
      Timeline_urlPrefix='/api/';       
      Timeline_parameters='bundle=true';
    </script>
	<script src="/api/timeline-api.js" type="text/javascript"></script>
	<script src="examples.js" type="text/javascript"></script>
	
     
    <script>
        var tl;
        function onLoad() {
            var eventSource = new Timeline.DefaultEventSource(0);
            var xmlpath = "evt.xml";
            // Example of changing the theme from the defaults
            // The default theme is defined in 
            // http://simile-widgets.googlecode.com/svn/timeline/tags/latest/src/webapp/api/scripts/themes.js
            var theme = Timeline.ClassicTheme.create();
            theme.event.bubble.width = 350;
            theme.event.bubble.height = 300;
            var uri = document.baseURI;
			var ind = uri.lastIndexOf('?');
			var arg = uri.substr(ind+1);
			
			if (arg!='')
				xmlpath=arg;
			//alert('xmlpath is '+xmlpath);
            var d = new Date(2011,8,23);
			
            var bandInfos = [
                Timeline.createBandInfo({
                    width:          "70%", 
                    intervalUnit:   Timeline.DateTime.SECOND, 
                    intervalPixels: 30,
                    eventSource:    eventSource,
                    date:           d,
                    theme:          theme,
                    layout:         'original'  // original, overview, detailed
                }),
                Timeline.createBandInfo({
                    width:          "10%", 
                    intervalUnit:   Timeline.DateTime.MINUTE, 
                    intervalPixels: 130,
                    eventSource:    eventSource,
                    date:           d,
                    theme:          theme,
                    layout:         'overview'  // original, overview, detailed
                }),
				Timeline.createBandInfo({
                    width:          "10%", 
                    intervalUnit:   Timeline.DateTime.HOUR, 
                    intervalPixels: 530,
                    eventSource:    eventSource,
                    date:           d,
                    theme:          theme,
                    layout:         'overview'  // original, overview, detailed
                }),
				Timeline.createBandInfo({
                    width:          "10%", 
                    intervalUnit:   Timeline.DateTime.DAY, 
                    intervalPixels: 200,
                    eventSource:    eventSource,
                    date:           d,
                    theme:          theme,
                    layout:         'overview'  // original, overview, detailed
                })
            ];
            bandInfos[1].syncWith = 0;
            bandInfos[1].highlight = true;
			bandInfos[2].syncWith = 1;
			bandInfos[2].highlight = true;
			bandInfos[3].syncWith = 2;
			bandInfos[3].highlight = true;
                        
            tl = Timeline.create(document.getElementById("tl"), bandInfos, Timeline.HORIZONTAL);
            tl.loadXML(xmlpath, function(xml, url) {
                eventSource.loadXML(xml, url);
                document.getElementById("jewish-event-count").innerHTML = eventSource.getCount();
            });
            setupFilterHighlightControls(document.getElementById("jewish-controls"), tl, [0,1,2,3], theme);
        }
        function centerTimeline(year) {
            tl.getBand(0).setCenterVisibleDate(new Date(year, 0, 1));
        }
        
        var resizeTimerID = null;
        function onResize() {
            if (resizeTimerID == null) {
                resizeTimerID = window.setTimeout(function() {
                    resizeTimerID = null;
                    tl.layout();
                }, 500);
            }
        }
    </script>
</head>
<body onload="onLoad();" onresize="onResize();">
<ul id="path">
  <li><a href="http://code.google.com/p/simile-widgets/" title="Home">SIMILE</a></li>
  <li><a href="../../" title="Timeline">Timeline</a></li>
  <li><a href="../" title="Examples">Examples</a></li>
  <li><span>Religion Timelines</span></li>
</ul>

<div id="body">
    <h1>Religion Timelines: Jewish History + Christianity History</h1>
    <p>Sources:
        <a href="http://en.wikipedia.org/wiki/Timeline_of_Jewish_history">Timeline of Jewish history (Wikipedia)</a>,
        <a href="http://en.wikipedia.org/wiki/Timeline_of_Christianity">Timeline of Christianity</a>.
        The Jewish timeline (top) contains <span id="jewish-event-count"></span> events while 
        the Christianity timeline contains <span id="christianity-event-count"></span> events.
        Titles of events have been phrased by David Huynh, author of this timeline example.
        The phrasing might not be of journalistic quality. The information in this example
        should not be used as an official source.
    </p>
    <p>Timeline version <span id='tl_ver'></span>.</p>
<script>Timeline.writeVersion('tl_ver')</script>
    
    <div style="width: 100%">
        <table style="text-align: center; width: 100%">
            <tr>
                <td><a href="javascript:centerTimeline(1);">1 AD</a></td>
                <td><a href="javascript:centerTimeline(250);">250 AD</a></td>
                <td><a href="javascript:centerTimeline(500);">500 AD</a></td>
                <td><a href="javascript:centerTimeline(750);">750 AD</a></td>
                <td><a href="javascript:centerTimeline(1000);">1000 AD</a></td>
                <td><a href="javascript:centerTimeline(1250);">1250 AD</a></td>
                <td><a href="javascript:centerTimeline(1500);">1500 AD</a></td>
                <td><a href="javascript:centerTimeline(1750);">1750 AD</a></td>
                <td><a href="javascript:centerTimeline(2000);">2000 AD</a></td>
            </tr>
        </table>
    </div>
    
    <div class="controls" id="jewish-controls">
    </div>
    <div id="tl" class="timeline-default" style="height: 800px">
    </div>
    <div class="controls" id="christianity-controls">
    </div>
</div>
</body>
</html>